<template>
	<view class="link-search">
		<!-- 搜索框 -->
		  <view class="search-warp">
			  <view class="search-input">
			  	<view class="search-input-value">
			  		<view class="search"><image  src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/export/search.png"></image></view>
			  		<input  confirm-type="search" @confirm="inputLink()"  v-model.trim="searchValue" 
					placeholder-style="color:#A3A3A3;font-size:28upx;"  placeholder-class="search-placehoder" 
					placeholder="搜索联系人" type="text" :focus="showFocus">
					<icon @click.stop="handleClearValue" v-show="isShowDeleate" class="delete" type="clear" size="16"/>
			  	</view>
			    <view @click="inputLink()" class="search-text" >
			  	   搜索  
			     </view>
			  </view>
		  </view>
		  <!-- 联系人内容 -->
		  <view class="link-warp" v-for="(item,key) in currentData" :key="key">
			  <view class="link-item" @click="goChat(item)">
				  <view class="link-item-l">
					  <image :src="item.accountHead"></image>
				  </view>
				  <view :class="key!==currentData.length-1?'link-item-r line':'link-item-r'" v-html="item.realName|| item.phoneNumber">

				  </view>
			  </view>
		  </view>
		  <view class="no-data" v-show="total===0">
		  	<view class="no-data-image">
		  		<image src="https://www.innovationgloble.com/wxs/img/wx/empty-data.png"></image>
		  	</view>
		  	<view class="no-data-text">抱歉，暂无匹配结果</view>
		  </view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		data(){
			return {
				isShowDeleate:false,
				searchValue:'',
				currentData:[],
				total:1,
				showFocus:true
			}
		},
		onLoad() {
			console.log('消息列表',this.histChatList)
		},
		methods:{
			...mapMutations('chatStore', ['setCurrentPerson']),
			goChat(item) {
				this.setCurrentPerson(item);
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${item.userId}`
				});
			},
			//搜索
			search(){
				
			},
			handleClearValue(){
				this.searchValue = '';
			},
			//匹配联系人
			inputLink(){
				if(this.searchValue===''){
					uni.showToast({
						icon: "none",
						title:'请输入关键词'
					})
					 this.currentData = [];
					return false
				}
			  let hisData = this.histChatList
			  let currentData =	hisData.filter((item,index)=>{
					if(item.realName){
						if(item.realName.includes(this.searchValue)){
							return true
						}
					}else {
						if(item.phoneNumber.includes(this.searchValue)){
							return true
						}
					}
				})
				this.currentData = currentData;
				this.total = currentData.length
				
			}
		},
		computed:{
			...mapGetters('chatStore',['histChatList']),
		},
		watch:{
			//监听输入框值
			searchValue(val){
				if(val===''){
					this.currentData = []
					this.isShowDeleate=false
				}else{
					this.isShowDeleate=true
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.link-search {
		background-color: #F5F5F5;
		min-height: 100vh;
		.search-warp {
			padding: 18upx 32upx 30upx 32upx;
			background-color: #F2F2F2;
			.search-input {
				display: flex;
				height: 78upx;
				.search-input-value {
					flex: 1;
					height: 78upx;
					background:#fff;
					border-radius:6upx;
					position: relative;
					.search {
						width: 32upx;
						height: 34upx;
						position: absolute;
						left: 20upx;
						top: 48%;
						transform: translateY(-50%);
						z-index: 999;
						image {
							width: 32upx;
							height: 34upx;
						}
					}
					.delete {
						width: 28upx;
						height: 28upx;
						position: absolute;
						right: 20upx;
						top: 50%;
						transform: translateY(-50%);
						z-index: 999;
					}
					input {
						height: 78upx;
						border-radius:6upx;
						font-size:28upx;
						padding-left: 72upx;
					}
				}
				
				.search-text {
					width: 88upx;
					height: 78upx;
					line-height: 78upx;
					text-align: right;
					font-size:28upx;
					font-weight:400;
					color:#486B9D;
				}
			}
		}
		.link-warp {
			box-sizing: border-box;
			padding-left: 32upx;
			background-color: #fff;
			.link-item {
				display: flex;
				justify-content: space-around;
				height: 106upx;
				line-height: 106upx;
				align-items: center;
				.link-item-l {
					width: 70upx;
					image {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
						vertical-align: middle;
					}
				}
				.link-item-r {
					flex: 1;
					margin-left: 18upx;
					height: 106upx;
					line-height: 106upx;
					align-items: center;
					color: #444444;
					font-size: 30upx;
					font-weight:400;
				}
				.line {
					border-bottom: 1upx solid #EBEBEB;
				}
			}
		
		}
		.no-data {
			width: 100%;
			height: 340upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0 4upx 22upx 0 rgba(0, 0, 0, 0.03);
			box-sizing: border-box;
			padding-top: 62upx;
			.no-data-image {
				width: 172upx;
				height: 148upx;
				margin: 0 auto;
		
				image {
					width: 172upx;
					height: 148upx;
					z-index: 999;
				}
			}
		
			.no-data-text {
				text-align: center;
				font-size: 26upx;
				font-weight: 400;
				color: rgba(163, 163, 163, 1);
				margin-top: 16upx;
			}
		}
	}
</style>
